<template>
  <div class="player">
    <el-drawer direction="rtl"
               :size="300"
               @close="stop"
               :title="`播放 ${playingFile ? playingFile.meta.common.title : ''}`"
               v-model="isPlayerShow"
               :close-on-click-modal="false">
      <div class="lyric-box">
        <div class="lyric-container">
          <div class="lyric-content" :class="{active: item.active}" v-for="item in lyric">{{ item.content }}</div>
        </div>
      </div>
      <div class="controller">
        <el-icon size="30">
          <VideoPlay v-if="!playing" @click="resume"/>
          <VideoPause v-else @click="pause"/>
        </el-icon>
        <play-progress :duration="duration" :current="current" @change="playCurrent"/>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import {
  isPlayerShow,
  playing,
  playingFile,
  current,
  duration,
  playCurrent,
  pause,
  resume,
  stop
} from "../uses/usePlayer";
import {lyric} from "../uses/useLyric";
import {VideoPlay, VideoPause} from "@element-plus/icons-vue";
import PlayProgress from "./play-progress.vue";
import {onBeforeMount} from "vue";

onBeforeMount(() => {
  stop();
});
</script>

<style scoped lang="scss">
.player {
  :deep(.el-drawer) {
    background: #222;

    .el-drawer__header {
      margin-bottom: 10px;
      padding: 10px;
      color: #fff;
      white-space: nowrap;

      span {
        overflow: hidden;
        width: 0;
        text-overflow: ellipsis;
      }
    }

    .el-drawer__body {
      padding: 0;
      display: flex;
      flex-direction: column;

      .lyric-box {
        flex: 1;
        height: 0;
        overflow: hidden;
        padding: 10px;

        .lyric-container {
          height: 100%;
          text-align: center;
          overflow: auto;

          .lyric-content {
            color: white;
            font-size: 14px;
            line-height: 2;
            transition: color 0.3s;

            &.active {
              color: #42b983;
              font-size: 16px;
            }
          }
        }
      }

      .controller {
        padding: 10px;
        background: rgba(255, 255, 255, 0.3);
        display: flex;
      }
    }
  }
}
</style>
